<template>
  <div id="MoodUpload">
    <el-form :model="FormData" :rules="fromRules" ref="form">
      <el-form-item>
        <el-upload ref="uploadImg" class="upload-demo" action="" :http-request="filesRequest" :limit="1" :multiple="false"
          :auto-upload="false" :on-exceed="fileExceed" :file-list="fileList" list-type="picture" accept=".jpg, .png">
          <el-button size="small" type="primary">选择心情图片</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item prop="moodName">
        <div>
          心情名：
          <el-input placeholder="请输入心情名" v-model="FormData.moodName" class="search" clearable></el-input>
        </div>
      </el-form-item>
    </el-form>
    <el-button @click="submit" type="success">提交</el-button>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      FormData: {
        moodName: '',
      },
      fileList: [],
      fromRules: {
        moodName: [
          { required: true, message: '请输入心情名称', trigger: 'blur' },
        ]
      },
    }
  },
  methods: {
    // 提交上传事件
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 调用el-upload的提交方法
          this.$refs.uploadImg.submit();
        } else {
          this.$message({
            showClose: true,
            message: '请完善数据再提交哦',
            type: 'error'
          })
        }
      })
    },
    // 发送请求，提交心情图片及心情名称
    filesRequest(param) {
      if (this.getfileName(param.file.name) != '.jpg' && this.getfileName(param.file.name) != '.png') {
        this.$message({
          message: '请选择文件格式为jpg或png的图片作为心情图片',
          type: 'error',
          showClose: true,
        })
        return
      }
      let data = new FormData()
      data.append("file", param.file)
      data.append("moodName", this.FormData.moodName)
      this.$axios({
        method: 'post',
        url: '/mood/login/uploadMood',
        data: data,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        if (res.data) {
          this.$message({
            showClose: true,
            message: '提交成功',
            type: 'success',
          })
        } else {
          this.$message({
            showClose: true,
            message: '提交失败，出现错误了X.X',
            type: 'error',
          })
        }
      })
    },
    // 文件个数过多事件
    fileExceed() {
      this.$message({
        showClose: true,
        type: 'error',
        message: '只能上传一个文件哦~',
      })
    },
    // 获取文件后缀工具函数
    getfileName(filename) {
      // 转换为小写
      const pos = filename.toLowerCase().lastIndexOf('.')
      let suffix = ''
      if (pos !== -1) {
        suffix = filename.substring(pos)
      }
      return suffix
    }
  }
}
</script>

<style lang="scss" scoped>
#MoodUpload {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
</style>
<style scoped="scoped">
.search {
  background-color: #202020;
  color: #fff;
  width: 180px;
}

/deep/.el-input__inner {
  background-color: #202020;
  color: #fff;
}

.el-button--primary {
  background-color: #202020;
  border-color: #fff;
}

/deep/.el-upload-list--picture .el-upload-list__item {
  background-color: #202020;
}
</style>